<template>
  <div class="UC_info">
    <!-- 用户信息表单区域 -->
    <div class="formArea">
      <!-- 使用el-form组件构建表单，绑定phoneForm数据模型，设置标签宽度自动适配，关联表单验证规则以及表单引用 -->
      <el-form
          :model="phoneForm"
          label-width="auto"
          :rules="phoneRules"
          ref="phoneFormRef"
          style="max-width: 600px"
      >
        <!-- 头像上传区域 -->
        <el-form-item label="头像">
          <Upload ref="uploadRef"></Upload>
        </el-form-item>

        <!-- 名称输入区域 -->
        <el-form-item label="名称">
          <el-input
              v-model="form.name"
              style="width: 200px"
              maxlength="10"
              show-word-limit
          />
        </el-form-item>

        <!-- 电子邮箱输入区域 -->
        <el-form-item label="电子邮箱">
          <el-input
              v-model="form.email"
              style="width: 300px"
              placeholder="请输入有效的电子邮箱地址"
          />
        </el-form-item>

        <!-- 家庭住址输入区域 -->
        <el-form-item label="家庭住址">
          <el-input
              v-model="form.address"
              style="width: 300px"
              placeholder="请输入详细家庭住址"
          />
        </el-form-item>

        <!-- 手机号码显示及操作区域 -->
        <el-form-item label="手机号码">
          <el-input
              style="width: 200px; margin-right: 20px"
              disabled
              :model-value="useUserStore().userInfo.phone"
          ></el-input>
          <el-button
              type="success"
              @click="dialogFormVisible = true"
              v-if="!useUserStore().isBinging"
          >绑定</el-button>
          <el-button
              type="danger"
              @click="clearBinding"
              v-if="useUserStore().isBinging"
          >解绑</el-button>
        </el-form-item>

        <!-- 性别选择区域 -->
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio value="male">男</el-radio>
            <el-radio value="female">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 保存按钮区域 -->
        <el-form-item>
          <el-button
              style="margin-left: auto"
              type="primary"
              @click="onSubmit"
          >保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 手机号码绑定对话框 -->
    <el-dialog
        v-model="dialogFormVisible"
        title="绑定手机"
        width="500"
    >
      <!-- 手机号码绑定表单 -->
      <el-form
          :model="phoneForm"
          :rules="phoneRules"
          ref="phoneFormRef"
          label-width="auto"
      >
        <el-form-item label="手机号码" prop="phoneNumber">
          <el-input v-model="phoneForm.phoneNumber" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证码" prop="captcha">
          <el-input v-model="phoneForm.captcha" autocomplete="off">
            <template #suffix>
              <span
                  class="send-sms-btn"
                  :style="{'--textColor': phoneForm.phoneNumber.length === 11 &&!seconds?'rgb(1, 184, 8)': null,
                        '--hoverCursor': phoneForm.phoneNumber.length === 11 &&!seconds?'pointer': 'no-drop',
                        '--hoverColor': phoneForm.phoneNumber.length === 11 &&!seconds?'rgb(1, 184, 8)': null,}"
                  @click="sendMSM"
              >{{!seconds?'发送验证码': seconds +'s后重新获取'}}</span>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button
              type="primary"
              @click="submitPhoneNumber(phoneFormRef)"
          >确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, watch } from 'vue'
import { ref } from 'vue'
import Upload from '@/views/UserCenter/Upload.vue'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import { useUserStore } from '@/stores/user.js'
import { updateUserInfoAPI } from '@/apis/user'

// 1. 用户基本信息表单相关数据及操作

// 1.1 用户基本信息表单数据，通过reactive创建响应式对象，用于存储昵称、性别、电子邮箱、家庭住址信息
// 昵称初始值从用户存储中获取已有的用户名，若不存在则为空字符串；性别初始化为'male'；电子邮箱和家庭住址初始为空字符串
const form = reactive({
  name: useUserStore().userInfo.username || '',
  sex:'male',
  email: '',
  address: '',
})

// 1.2 头像上传组件引用，通过ref创建引用，用于后续调用上传组件的提交上传方法
const uploadRef = ref()
// 定义函数用于触发头像上传组件的提交上传操作
const callUpload = () => {
  uploadRef.value.submitUpload()
}

// 1.3 保存用户信息的提交函数
// 此函数主要执行以下几个操作：
// 1. 调用头像上传函数，触发头像上传操作（假设Upload组件有相应的提交上传逻辑）
// 2. 通过用户存储更改昵称信息，将表单中的昵称赋值到用户存储中
// 3. 通过用户存储更改电子邮箱和家庭住址信息，将表单中的对应值赋值到用户存储中
// 4. 调用后端接口将更新后的用户信息（包含头像、昵称、性别、电子邮箱、家庭住址等，通过用户存储获取当前完整用户信息）发送到后端进行保存
// 5. 显示保存成功的提示消息
const onSubmit = () => {
  // 上传新头像
  callUpload()
  // 更改昵称
  useUserStore().alterNickName(form.name)
  // 更改电子邮箱
  useUserStore().alterEmail(form.email)
  // 更改家庭住址
  useUserStore().alterAddress(form.address)
  // 通知后端更新
  updateUserInfoAPI(useUserStore().userInfo)
  ElMessage({
    message: '保存成功',
    type: 'success',
    plain: true,
  })
}

// 2. 手机号码绑定相关表单数据及操作

// 2.1 手机号码绑定表单数据，通过reactive创建响应式对象，用于存储手机号码和验证码信息，初始值均为空字符串
const phoneForm = reactive({
  phoneNumber: '',
  captcha: '',
})
// 手机号码绑定表单实例引用，通过ref创建引用，用于后续进行表单验证操作
const phoneFormRef = ref<FormInstance>()

// 2.2 控制手机号码绑定对话框显示隐藏的响应式引用，初始值为false，即默认对话框不显示
const dialogFormVisible = ref(false)

// 2.3 手机号码绑定表单的验证规则，定义了手机号码和验证码的必填以及格式相关验证规则
const phoneRules = {
  phoneNumber: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号码格式不对', trigger: 'blur' },
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 4, message: '请输入4位有效验证码', trigger: 'blur' },
  ]
}

// 2.4 短信验证码相关逻辑

// 2.4.1 用于记录短信验证码发送后剩余的倒计时秒数，初始值为false，发送验证码后变为具体秒数倒计时
const seconds = ref(false)
// 2.4.2 定时器的ID，用于后续清除定时器操作，避免内存泄漏
let intervalId
// 2.4.3 发送短信验证码的函数
// 此函数的主要逻辑如下：
// 1. 首先判断手机号码输入框中输入的内容长度是否为11位，并且当前是否不在倒计时状态（seconds为false）
// 2. 如果满足上述条件，则将seconds设置为60，表示开始60秒倒计时
// 3. 启动定时器，每秒减少1秒倒计时数值（通过setInterval实现）
// 4. 显示验证码发送成功的提示消息（实际这里应该是调用后端接口真正发送验证码，目前只是模拟提示成功，后续需完善）
function sendMSM() {
  if (phoneForm.phoneNumber.length === 11 && seconds.value === false) {
    seconds.value = 60
    // 启动定时器
    intervalId = setInterval(() => {
      seconds.value--
    }, 1000) // 1000毫秒，即1秒
    // TODO send msm，此处需完善真正发送验证码的后端调用逻辑
    ElMessage({
      message: '验证码发送成功',
      type: 'success',
      plain: true,
    })
  }
}

// 2.4.4 通过watch监听seconds的变化，当倒计时秒数变为0时，清除定时器，避免内存泄漏，并将seconds重置为false
watch(seconds, (newValue, oldValue) => {
  if (seconds.value === 0) {
    // 清除定时器，防止内存泄漏
    clearInterval(intervalId)
    seconds.value = false
  }
})

// 2.5 提交手机号码绑定表单的函数
// 此函数接收表单实例作为参数，首先进行表单验证，如果验证通过，则执行以下操作：
// 1. 关闭手机号码绑定对话框
// 2. 在本地用户存储中更新绑定的手机号码信息，将表单中输入的手机号码赋值到用户存储中
// 3. 调用后端接口将更新后的用户信息（包含新绑定的手机号码等，通过用户存储获取当前完整用户信息）发送到后端进行保存
// 4. 显示绑定成功的提示消息
// 如果表单验证不通过，则在控制台打印验证失败的相关字段信息
const submitPhoneNumber = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      dialogFormVisible.value = false
      // 本地更新数据
      useUserStore().bindPhoneNumber(phoneForm.phoneNumber)
      // 通知后端更新
      updateUserInfoAPI(useUserStore().userInfo)
      ElMessage({
        message: '绑定成功',
        type: 'success',
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

// 2.6 手机号码解绑函数
// 此函数通过ElMessageBox弹出确认框，询问用户是否确定解绑当前手机号码，当用户点击确认时，执行以下操作：
// 1. 在本地用户存储中清除绑定的手机号码信息，将其设置为空字符串
// 2. 调用后端接口将更新后的用户信息（移除绑定的手机号码等，通过用户存储获取当前完整用户信息）发送到后端进行保存
// 3. 显示解绑成功的提示消息
const clearBinding = () => {
  ElMessageBox.confirm(
      '确定解绑当前手机号码？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        // 本地更新数据
        useUserStore().bindPhoneNumber('')
        // 通知Backend更新
        updateUserInfoAPI(useUserStore().userInfo)
        ElMessage({
          type: 'success',
          message: '解绑成功',
        })
      })
      .catch(() => {})
}
</script>

<style scoped lang="less">
.UC_info {
  width: 990px;
  height: 600px;
  background-color: white;
  border-radius: 10px;
  padding: 0 20px;
}
.formArea {
  padding: 20px 20px;
}
.el-form-item {
  margin-bottom: 35px;
}
.send-sms-btn {
  color: var(--textColor);
  border: none;
  background-color: rgba(255, 255, 255, 0);
  font-size: 14px;
}
.send-sms-btn:hover {
  color: var(--hoverColor);
  cursor: var(--hoverCursor);
}
</style>